<template>
	<view>
		<u-navbar title="消息列表" bgColor="transparent" :titleStyle="{'color':'#fff'}" leftIconColor="#fff" placeholder
			autoBack="">
		</u-navbar>
		<view class="bgs">
			<view class="ltitle fs32 bold mb30">
				直播间弹幕列表
			</view>
			<scroll-view scroll-y="true" style="height: 78vh;" @scrolltolower="ReachBottom">
				<view class="listBox" v-show="list.length" ref="scrolldIV">
					<view class="litem df message" :id="'msg'+idx" v-for="(i,idx) in list" :key="idx" ref="list">
						<view class="main" style="color: #000;">
							<text class="fs30">{{i.name}}:</text>
							<text class="bold"> {{i.content}}</text>
						</view>
						<view class="main df mt15">
							<text>商品讲解：{{i.explain_name}}</text>
						</view>
						<view class="main df" v-show="i.interact_name">
							<text> 直播互动: {{i.interact_name}}</text>
						</view>
						<view class="main df">
							评论时间：{{i.create_time}}
							<view v-show="i.is_match==0" class="get" @click="getKey(i)">
								收录
							</view>
						</view>

					</view>
				</view>
				<view class="pt30" v-show="!list.length">
					<image src="../../static/img/noMsg.png" width="140rpx" height="160rpx" mode="aspectFit"></image>
					<view class="text-center" style="color: #97999f;">
						暂无弹幕
					</view>
				</view>
			</scroll-view>
		</view>
		<u-modal :show="show" title="收录关键词" @confirm="submit" @cancel="show=false;active={}" ref="uModal" asyncClose
			showCancelButton>
			<view class="slot-content" style="height: 8vh;">
				<u--form labelPosition="left" labelWidth="70" ref="uForm">
					<u-form-item label="直播互动" prop="option">
						<uni-combox :candidates="candidates" :border="false" placeholder="请选择直播互动" emptyTips="未找到该直播互动"
							v-model="option"></uni-combox>
					</u-form-item>
					</u-form-item>
				</u--form>
			</view>
		</u-modal>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				list: [],
				candidates: [],
				keylist: [],
				id: '',
				option: '',
				optionId: '',
				active: '',
				show: false,
				formInline: {
					page: 1,
					limit: 10,
					total: 0
				},
			};
		},
		onLoad(e) {
			if (e?.id) {
				this.id = e.id
				this.getData()
			}
			this.getGroup()
		},
		methods: {
			ReachBottom() {
				console.log('onReachBottom', this.formInline.total, this.list.length);
				if (this.formInline.total > this.list.length) {
					this.formInline.page++
					this.getData();
				}
			},
			getGroup() {
				this.$api.interactList().then(res => {
					console.log('res', res);
					if (res.code == 200) {
						res.data.list.map(r => {
							this.candidates.push(r.name)
						})
						this.keylist = res.data.list;
						this.$forceUpdate()
					} else {
						this.$tools.toast(res.msg);
					}
				})
			},
			getData() {
				let params = {
					live_data_id: this.id,
					...this.formInline
				}
				this.$api.liveMsgList(params).then(res => {
					console.log('res', res);
					if (res.code == 200) {
						if (this.formInline.page == 1) {
							this.list = res.data.list
						} else {
							this.list = this.list.concat(res.data.list)
						}
						this.formInline.total = res.data.count
						console.log(this.list);
						this.$forceUpdate()
					} else {
						this.$tools.toast(res.msg);
					}
				})
			},
			getKey(i) {
				this.active = i
				this.show = true
			},
			submit() {
				this.keylist.map(r => {
					if (r.name == this.option) {
						this.optionId = r.id
					}
				})
				let params = {
					id: this.active.id,
					interact_id: this.optionId
				}
				this.$api.recordKeyword(params).then(res => {
					this.$tools.toast(res.msg);
					this.show = false
					if (res.code == 200) {
						this.getData()
					}
				})
			}
		}
	}
</script>

<style lang="scss">
	.bgs {
		background: #fff;
		border-radius: 16rpx;
		color: #000;
		margin: 40rpx 30rpx;
		padding: 30rpx;

		.listBox {
			background: #f1f3f4;
			border-radius: 16rpx;
			color: #000;

			.litem {
				background: #fff;
				padding: 20rpx;
				flex-wrap: wrap;
				border-bottom: 2px solid #f5f5f5;
				font-size: 28rpx;
				color: #959595;

				.main {
					width: 100%;
				}

				.get {
					padding: 4rpx 20rpx;
					background: #308ffc;
					border-radius: 20rpx;
					color: #fff;
				}

				.replay {
					width: 10%;
					font-size: 26rpx;
					border-radius: 16rpx;
					border: 1px solid #308ffc;
					padding: 0rpx 10rpx;
					text-align: center;
					height: 45rpx;
				}
			}
		}
	}
</style>